<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>v-model表单绑定</title>
		<script src="../../vue/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<!-- 使用v-model实现双向绑定 -->
			<input type="text" v-model="message" />{{message}}
			<!--1. v-model结合radio使用 -->
			<label for="male">
				<input type="radio"  id="male"  name="sex" value="男" v-model="sex"/>男<!-- 加name实现互斥关系 -->
			</label>
			<label for="female">
				<input type="radio"  id="female"  name="sex" value="女" v-model="sex"/>女
				<!-- 同是绑定一个sex也会发生互斥关系 -->
			</label>
			<h2>你选择的性别是:{{sex}}</h2>
			<!--2. v-model结合checkbox使用 -->
			<label for="agree"><!-- label作用就是点击字也可以选中 -->
				<input type="checkbox" name="" id="agree" value="" v-model="isAgree" />同意协议
			</label>
			<h2>你的选择是{{isAgree}}</h2>
			<button type="button" :disabled="!isAgree">下一步</button>
			<!-- 多选框 -->
			<br>
			<label for="a">
				<input type="checkbox" name="" id="a" value="篮球" v-model="hobbies" />篮球
				<input type="checkbox" name="" id="a" value="足球" v-model="hobbies" />足球
				<input type="checkbox" name="" id="a" value="乒乓球" v-model="hobbies" />乒乓球
			</label>
			<h2>你选择的爱好有：{{hobbies}}</h2>
			<!-- 3.v-model结合select使用 -->
			<select name="ab" v-model="fruit">
				<option value="苹果">苹果</option>
				<option value="香蕉">香蕉</option>
				<option value="葡萄">葡萄</option>
				<option value="梨子">梨子</option>
				<option value="桃子">桃子</option>
			</select>
			<h2>你选择的水果有：{{fruit}}</h2>
			<!-- 选择多个 -->
			<select name="ab" v-model="fruits" multiple><!-- 如果要实现选择多个加multiple -->
				<option value="苹果">苹果</option>
				<option value="香蕉">香蕉</option>
				<option value="葡萄">葡萄</option>
				<option value="梨子">梨子</option>
				<option value="桃子">桃子</option>
			</select>
			<h2>你选择的水果有：{{fruits}}</h2>
		</div>
		<script type="text/javascript">
			var app = new Vue({
				el:'#app',
				data:{
					message:'xie',
					sex:'',
					isAgree:false,
					hobbies:[],
					fruit:[],
					fruits:[]
				}
			});
		</script>
	</body>
</html>
